<html>
<head>
<meta NAME="author" CONTENT="Peter Csizmadia">
<link REL ="stylesheet" TYPE="text/css" HREF="../../../marvinmanuals.css" TITLE="Style">
<title>MarvinView Example - Adding advanced components to molecule tables</title>
</head>
<body onLoad="links_set_search(location.search)">

<h1>MarvinView Example - Adding advanced components to molecule tables</h1>

If you have additional components (not just a molecule in a cell),
you have to specify the
<a HREF="../../../help/developer/viewman.html#advanced.layout">layout</a> and the
<a HREF="../../../help/developer/viewman.html#advanced.param">parameters</a> of these components.
If the layout and the parameters are the same for each cell, then it
is enough to specify them for cell 0.

<p>
<center>
<script LANGUAGE="JavaScript1.1" SRC="../../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
mview_begin("../../..", 446, 186);
mview_param("rows", "3");
mview_param("cols", "2");
mview_param("border", "1");
mview_param("visibleRows", "2");
mview_param("layoutH", ":1:3:L:0:0:1:2:L:0:2");
mview_param("paramH", ":L:12b:L:12b");
mview_param("cell0", "|Molecule|Image");
mview_param("cell1", "|Molecule|Image");
mview_param("layout", ":2:3:"
+"M:1:0:1:2:"
+"L:0:0:"
+"B:0:1:"
+"I:0:2:2:1");
mview_param("param", ":M:150:150:"
+"L:10:"
+"B:10:search for more molecules like this:_self");
mview_param("cell2", "|../../../mols-2d/caffeine.csmol"
+"|first"
+"| Search |%|example-searchmore1.cgi?mol=first"
+"|../../../img/easychart1.gif||");
mview_param("cell3", "|O[C@H](\C=C\[C@@H](O)C1=CC=CC=C1)C2=CC=CC=C2|second"
+"| Search |%|example-searchmore1.cgi?mol=second"
+"|../../../img/easychart2.gif||");
mview_param("cell4", "|Ethane\n"
+"  Marvin  07119915552D\n"
+"\n"
+"  2  1  0  0  0  0  0  0  0  0999 V2000\n"
+"   -0.5625    1.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"
+"   -0.5625    0.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"
+"  1  2  1  0  0  0  0\n"
+"M  END\n"
+"|third"
+"| Search |%|example-searchmore1.cgi?mol=third"
+"|../../../img/easychart3.gif||");
mview_param("cell5", "|C[C@]12CC[C@@H]3[C@H](CC[C@H]4CC(=O)C(\C[C@]34C)=C\O)[C@@H]1CCC(=O)O2"
+"|fourth"
+"| Search |%|example-searchmore1.cgi?mol=fourth"
+"|../../../img/easychart4.gif||");
mview_end();
//-->
</script>
</center>

<p>
First set the number of rows and columns:
<blockquote>
<pre>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot; <strong>SRC</strong>=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;<strong>&gt;</strong><strong>&lt;/script&gt;</strong>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot;<strong>&gt;</strong>
<strong>&lt;!--</strong>
<strong>mview_begin(</strong>&quot;../../..&quot;<strong>,</strong> 446<strong>,</strong> 186<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.rows">rows</a>&quot;<strong>,</strong> &quot;3&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cols">cols</a>&quot;<strong>,</strong> &quot;2&quot;<strong>);</strong>
</pre>
</blockquote>
Note that the number of rows is increased by one here (3 instead of 2) because
we also have a <em>header</em> row.
<p>
When you have many components in a cell, it is useful to separate the cells
with borders. The width of the border is specified in the following way:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.border">border</a>&quot;<strong>,</strong> &quot;1&quot;<strong>);</strong>
</pre>
</blockquote>
This applet is scrollable:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.visibleRows">visibleRows</a>&quot;<strong>,</strong> &quot;1&quot;<strong>);</strong>
</pre>
</blockquote>
The <code>layout</code> and <code>layoutH</code> parameters begin with the
&quot;<code>:</code>&quot; separator character.
You are not forced to use this character, for example
&quot;<code>|</code>&quot; or &quot;<code>,</code>&quot; are also good choices.
The header row layout (<code>layoutH</code>) is specified in the following line:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.layout">layoutH</a>&quot;<strong>,</strong> &quot;:1:3:L:0:0:1:2:L:0:2:&quot;<strong>);</strong>
</pre>
</blockquote>
The first two numbers mean that header cells are small tables of 1
(sub)row and 3 (sub)columns. &quot;<code>L:0:0:1:2</code>&quot; means that the
first component is a <strong>l</strong>abel with its upper left corner in row
0, column 0, occupying 1 row and 2 columns. The second label
(<code>L:0:2</code>) is in row 0, column 2, and its size is not set, thus it
occupies 1 row and 1 column (which is the default size). The line below shows the way
how parameters for the header labels, the size and the font style (<strong>b</strong>old,
<strong>i</strong>talic or default) are specified in the <code>paramH</code>
parameter:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.param">paramH</a>&quot;<strong>,</strong> &quot;:L:12b:L:12b&quot;<strong>);</strong>
</pre>
</blockquote>
In a table with two (big) columns, the label texts are specified using the first
two <code>cell</code><i>n</i> parameters:
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cell">cell0</a>&quot;<strong>,</strong> &quot;|Molecule|Image&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell1&quot;<strong>,</strong> &quot;|Molecule|Image&quot;<strong>);</strong>
</pre>
</blockquote>
Molecule cells are defined in a similar way. In this example, they are small
tables of 2 (sub)rows and 3 (sub)columns. We have a <strong>m</strong>olecule
component, with a layout defined as &quot;<code>M:1:0:1:2</code>&quot;. It
means that the component's upper left corner is in row 1, column 0 and it
occupies 1 row and 2 columns. A text label &quot;<code>L:0:0</code>&quot; and
a <strong>b</strong>utton &quot;<code>B:0:1</code>&quot; are also defined.
Note that they each occupy 1x1 subcells (default) because we didn't specify
the subcell size. The last component is an <strong>i</strong>mage that has
its location, height and width specified (<code>I:0:2:2:1</code>), and which
occupies the third column.
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.layout">layout</a>&quot;<strong>,</strong> &quot;:2:3:&quot;
+&quot;M:1:0:1:2:&quot;
+&quot;L:0:0:&quot;
+&quot;B:0:1&quot;
+&quot;I:0:2:2:1&quot;<strong>);</strong>
</pre>
</blockquote>
The <code>param</code> parameter specifies
the <strong>m</strong>olecule width and height in pixel units,
the size of the <strong>l</strong>abel's font (10pt),
the size of the <strong>b</strong>utton's font, the description of the button
(that appears in the status line when the mouse is over the button),
and the frame where the output of the CGI script appears when the user
presses the button.
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.param">param</a>&quot;<strong>,</strong> &quot;:M:150:150:&quot;
+&quot;L:10:&quot;
+&quot;B:10:search for more molecules like this:_self&quot;<strong>);</strong>
</pre>
</blockquote>
In the <code>cell</code><em>i</em> parameter we specified the molfile, the
text label, the button label, the special character for the button URL
(&quot;<code>%</code>&quot;, not used in this simple example), and the button
URL.  These fields are separated by the <em>separator character</em> which is
the first character in the string: &quot;<code>|</code>&quot; in this case.
The button URL usually points to a CGI script.
<blockquote>
<pre>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cell">cell2</a>&quot;<strong>,</strong> &quot;|../../../mols-2d/caffeine.csmol&quot;
+&quot;|first&quot;
+&quot;| Search |%|example-searchmore1.cgi?mol=first&quot;
+&quot;|../../../img/easychart1.gif||&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell3&quot;<strong>,</strong> &quot;|O[C@H](\C=C\[C@@H](O)C1=CC=CC=C1)C2=CC=CC=C2&quot;
+&quot;|second&quot;
+&quot;| Search |%|example-searchmore1.cgi?mol=second&quot;
+&quot;|../../../img/easychart2.gif||&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell4&quot;<strong>,</strong> &quot;|Ethane\n&quot;+
+&quot;  Marvin  07119915552D\n&quot;
+&quot;\n&quot;
+&quot;  2  1  0  0  0  0  0  0  0  0999 V2000\n&quot;
+&quot;   -0.5625    1.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n&quot;
+&quot;   -0.5625    0.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n&quot;
+&quot;  1  2  1  0  0  0  0\n&quot;
+&quot;M  END\n&quot;
+&quot;|third&quot;
+&quot;| Search |%|example-searchmore1.cgi?mol=third&quot;
+&quot;|../../../img/easychart3.gif||&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell5&quot;<strong>,</strong> &quot;|C[C@]12CC[C@@H]3[C@H](CC[C@H]4CC(=O)C(\C[C@]34C)=C\O)[C@@H]1CCC(=O)O2&quot;
+&quot;|fourth&quot;
+&quot;| Search |%|example-searchmore1.cgi?mol=fourth&quot;
+&quot;|../../../img/easychart4.gif||&quot;<strong>);</strong>
<strong>mview_end();</strong>
<strong>//--&gt;</strong>
<strong>&lt;/script&gt;</strong>
</pre>
</blockquote>
Note that the index of the upper left molecule cell is <i>i</i>=2 because
indices 0 and 1 correspond to the two header cells.

<p>
<center><div class="lenia">&nbsp;</div></center>
<p>
Now let us see how to <a HREF="advancedlayout.html">fine-tune the layout</a>.

</body>
</html>
